import { useUserInfo } from "@/features/business/HomePage_deprecated"
import { useLoginAction } from "@/features/useSearchAction"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { useEffect, useState } from "react"
import { Link, useSearchParams } from "react-router-dom"
import { useUserWallet } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import { getAssetsUrlWithHttp } from "@/features/business/HomePage_deprecated/constant"
import { AuthedLoginButton } from "./AuthedLoginButton"
import { BaseRoundButton } from "./BaseRoundButton"

const HeaderContainer = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14rem;
    a {
        outline: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
`

const Text = styled.span`
    font-weight: 700;
    font-size: 14rem;
    white-space: nowrap;
`

const AuthedContainer = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
`

const Avatar = styled.img`
    width: 32rem;
    height: 32rem;
    border-radius: 16rem;
    margin-left: 12rem;
    object-fit: cover;
`

const IconLogo = styled.img`
    width: 136rem;
    height: 32rem;
    object-fit: cover;
`

export const HomeHeader = () => {
    const { isLogin, userInfo } = useUserInfo()
    const { wallet } = useUserWallet()
    const { openModalToStep } = useLoginAction()
    const [searchParams] = useSearchParams()
    const [avatarSrc, setAvatarSrc] = useState<string>(
        getAssetsUrlWithHttp(userInfo?.avatar) || resolveAssetImage("pages/HomePage/ai_girl.webp"),
    )
    const redirect = searchParams.get("redirect")

    useEffect(() => {
        if (isLogin && userInfo?.avatar) {
            setAvatarSrc(userInfo?.avatar)
        }
    }, [isLogin, userInfo, setAvatarSrc])

    useEffect(() => {
        if (redirect && !isLogin) {
            openModalToStep("login-otp-1")
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [redirect, isLogin])

    return (
        <HeaderContainer>
            <Link to={"/"}>
                <IconLogo
                    src={resolveAssetImage("pages/HomePage/icon_logo.webp")}
                    onClick={() => {}}
                />
            </Link>
            {isLogin ? (
                <AuthedContainer>
                    <AuthedLoginButton balance={wallet.balance || "0"} />
                    <Link to={"/my"}>
                        <Avatar
                            src={avatarSrc}
                            alt=""
                            onError={() => {
                                setAvatarSrc(resolveAssetImage("pages/HomePage/ai_girl.webp"))
                            }}
                        />
                    </Link>
                </AuthedContainer>
            ) : (
                <BaseRoundButton
                    width={128}
                    height={32}
                    children={<Text>Login / Sign Up</Text>}
                    onClick={() => openModalToStep("login-otp-1")}
                />
            )}
        </HeaderContainer>
    )
}
